<template>
  <div class="login">
    <HeaderL></HeaderL>
     <!--续费子组件-->
    <PopUpBuy :popBuyData = "xuFeiData" v-if="popShow == 1" @cancelBuy="changePopShow"></PopUpBuy>
    <!--续费子组件-->
    <PopUpBuy :popBuyData = "noBuyData" v-if="popShow == 2" @cancelBuy="changePopShow"></PopUpBuy>
    <!-- 顶部banner,登录页面 -->
    <div class="loginBanner" :style="{height: clientHeight}">
      <div class="bannerContent">
        <div class="bannerLeft">
          <p>Our blog</p>
          <p>How to design workflow?</p>
          <div>
            <p>But what exactly you mean by „workflow”?</p>
            <p>Workflow is the way how you work, today I will</p>
            <p>show you a few really awesome steps to improve</p>
          </div>
          <div class="readMore">
            <span>read more</span>
          </div>
        </div>
        <div class="bannerRighr">
          <div class="bannerRighrC">
            <div class="loginTitle">
              <span>登录明日情报</span>
            </div>
            <form class="loginFrom" action="">
              <div class="loginError"></div>
              <div class="username">
                <i :class="usernameIcon ? 'UIconB' : 'UIcon'"></i>
                <input id="username" type="text" v-model="usernameVal" name="username" placeholder="请输入用户名" @blur="inputBlur" @focus="inputFocus">
                <p v-if="usernameError">用户名不能为空</p>
              </div>
              <div class="password">
                <i :class="passwordIcon ? 'PIconB' : 'PIcon'"></i>
                <input id="password" type="password" v-model="passwordVal" name="passwoed" placeholder="请输入密码" @blur="inputBlur" @focus="inputFocus">          
                <p v-if="passwordError">密码不能为空</p>
              </div>
              <div class="validate">
                <i :class="validateIcon ? 'VIconB' : 'VIcon'"></i>
                <input id="validate" type="text" v-model="validateVal" name="validate" placeholder="验证码" @blur="inputBlur" @focus="inputFocus">
                <img title = "点我换一张" id="img" alt="" src="http://192.168.31.217:8080/yzm" style="cursor:pointer;" @click="changeVerifyCode();">
                <span class="validateVary" @click="changeVerifyCode();"></span>
              </div>
              <div>
                <span class="rememberC">
                  <input id="remember"  type="checkbox" name="remember">
                  <label for="remember" class="remember" :class="rememberC? 'rememberClick' : 'rememberD'" @click = "rememberCheck"></label>
                  <span class="rememberP">自动登录</span>
                </span>
                <router-link to="/FPassword">
                  <span class="forgetP">忘记密码？</span>                  
                </router-link>
              </div>
              <input type="button" class="loginBut" value="登录" @click="loginBut">
              <router-link to="/register" class="register"><span>没有账号，立即注册</span></router-link>
            </form>
          </div> 
        </div>
      </div>
    </div>
    <!-- 产品特色 -->
    <div class="feature">
      <div>
        <span>
          <img src="../../assets/Group9.png" alt="">
        </span>
        <p>智能预测与评估</p>
      </div>
      <div>
        <span>
          <img src="../../assets/Group10.png" alt="">
        </span>
        <p>自动分类与推荐</p>
      </div>
      <div>
        <span>
          <img src="../../assets/Group11.png" alt="">
        </span>
        <p>分布式主题建模</p>
      </div>
      <div>
        <span>
          <img src="../../assets/Group12.png" alt="">
        </span>
        <p>技术识别与抽取</p>
      </div>
    </div>
    <!-- 品牌故事 -->
    <div class="AboutUs">
      <div class="AboutUsLeft">
        <img src="../../assets/aboutus.png" alt="">
      </div>
      <div class="AboutUsRight">
        <div class="AboutUsTitle">
          <span>About Us</span>
        </div>
        <div class="AboutUsContent">
          <p>
            We pride ourselves on our commitment to excellence, as well as our ability to deliver for our partners. Learn more about how our talented team of passionate designers, developers, and product experts can build value for you.
          </p>
          <p>
            Vestibulum mollis sodales tellus, sed porta lorem molestie vitae. Sed fermentum metus justo, in vestibulum felis imperdiet sed. Ut non purus sed sapien auctor pellentesque. Sed id sem elementum, placerat nibh upretium metus.</p>
        </div>
        <button>
          More About Us
        </button>
      </div>
    </div>
    <!-- 下载 -->
    <div class="download">
      <div class="downloadContent">
        <div class="downloadTop">
          <div class="downloadTitle">
            <span>Do You Like Wapik? Download it Now</span>
          </div>
          <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
        <div class="downloadbottom">
          <div class="downloadLeft">
            <p>
              Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
            </p>
            <button>DOWNLOAD NOW! - </button>
          </div>
          <div class="downloadRight">
            <div class="downloadRC">
              <div class="downloadRCT">
                <span>Jean B. Robert - Microsoft</span>
              </div>
              <p>
                "After using agency my business skyrocketed! I just can't get enough of agency. I want to get a T-Shirt with agency on it so I can show it off to everyone. I would also like to say thank you to all your staff. Really good."
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 图文详情 -->
    <div class="dateils">
      <div class="dateilsTitle">
        <div>
          <span>HOW DOES IT</span>
        </div>
        <hr>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
        </p>  
      </div>
      <div class="dateilsContent">
        <div class="dateilsList dateilsList1">
          <div class="dateilsListImg">
            <img src="../../assets/dateilsImg1.png" alt="">
          </div>
          <div class="dateilsListC">
            <div>
              <span>Digital Design Strategy</span>
            </div>
            <p>We design through an iterative process mind mapping ideas to find opportunities.</p>
            <p>We design through an iterative process mind mapping ideas to find opportunities.We design through an iterative process mind mapping ideas to find opportunities.</p>
          </div>
        </div>
        <div class="dateilsList">
          <div class="dateilsListImg">
            <img src="../../assets/dateilsImg1.png" alt="">
          </div>
          <div class="dateilsListC">
            <div>
              <span>Branding, Illustration & Animation</span>
            </div>
            <p>We design through an iterative process mind mapping ideas to find opportunities.</p>
            <p>We design through an iterative process mind mapping ideas to find opportunities.We design through an iterative process mind mapping ideas to find opportunities.</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 数据 -->
    <div class="data">
      <div class="dateilsTitle">
        <div>
          <span>全网行业数据池</span>
        </div>
        <hr>
        <p>
          Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.Donec id elit non mi porta gravida at eget metus.
        </p>  
      </div>
      <div class="dataContent">
        <div class="dataLists">
          <div class="dataList">
            <p>BASIC</p>
            <div>
              <span class="number">45199</span>
              <span class="month">/month</span>
            </div>
            <div class="dataDateils">
              <p>Justo Fringilla</p>
              <p>Mollis Sit Nullam</p>
              <p>Ultricies Purus Amet</p>
              <p>Cras Inceptos</p>
            </div>
            <button>SELECT PLAN</button>
          </div>
          <div class="dataList">
            <p>PREMIUM</p>
            <div>
              <span class="number">88699</span>
              <span class="month">/month</span>
            </div>
            <div class="dataDateils">
              <p>Justo Fringilla</p>
              <p>Mollis Sit Nullam</p>
              <p>Ultricies Purus Amet</p>
              <p>Cras Inceptos</p>
            </div>
            <button>SELECT PLAN</button>
          </div>
          <div class="dataList">
            <p>PLUS</p>
            <div>
              <span class="number">89399</span>
              <span class="month">/month</span>
            </div>
            <div class="dataDateils">
              <p>Justo Fringilla</p>
              <p>Mollis Sit Nullam</p>
              <p>Ultricies Purus Amet</p>
              <p>Cras Inceptos</p>
            </div>
            <button>SELECT PLAN</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 页脚 -->
    <div class="footer">
      <div class="footerTop">
        <dl>
          <dt>WAPIK</dt>
          <dd>
            <i>@: </i>
            <span>hi@wapik.com</span>
          </dd>
          <dd>
            <i>p: </i>
            <span>+62 202 555 0117</span>
          </dd>
          <dd>
            <i>a: </i>
            <span>610 Overlook Circle Suite 323 Kalamazoo, MI 49009</span>
          </dd>
        </dl>
        <dl>
          <dt>Company</dt>
          <dd>Home</dd>
          <dd>About Us</dd>
          <dd>Pricing</dd>
          <dd>Contact Us</dd>
        </dl>
        <dl>
          <dt>Others</dt>
          <dd>Help & Support</dd>
          <dd>Privacy Policy</dd>
          <dd>Terms</dd>
          <dd>Sitemap</dd>
        </dl>
        <dl class="Newsletter">
          <dt>Newsletter</dt>
          <dd>Subscribe to our newsletter and get all the cool news</dd>
          <dd>
            <input type="text" name="" id="" placeholder="Enter Email">
            <i></i>
          </dd>
        </dl>
      </div>
      <hr>
      <div class="footerBottom">
        <span>All rights reserved 2015.</span>
        <div>
          <a href=""><i class="footerIcon1"></i></a>
          <a href=""><i class="footerIcon2"></i></a>
          <a href=""><i class="footerIcon3"></i></a>
          <a href=""><i class="footerIcon4"></i></a>
          <a href=""><i class="footerIcon5"></i></a>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import Header from '@/components/header2'
import PopUpBuy from '@/components/public/popUpBuy'

export default {
  data () {
    return {
      usernameIcon: false, // 用户名输入框图片替换
      passwordIcon: false, // 密码输入框图片替换
      validateIcon: false, // 验证码输入框图片替换
      usernameVal: '', // 用户名输入框内容
      passwordVal: '', // 密码输入框内容
      validateVal: '', // 验证码输入框内容
      usernameError: false, // 用户名输入框报错是否显示
      passwordError: false, // 密码输入框报错是否显示
      validateError: false, // 验证码输入框报错是否显示
      rememberC: false, // 选择框是否选择
      clientHeight: '', // 浏览器视口高度
      popShow: 0, // 判断点击登录应该弹出什么样的框
      xuFeiData: { // 续费弹框内容
        h5Content: '尊敬的用户，您好！',
        pContent: '您购买的明日情报专业版已过期，无法使用全部功能！',
        buttonLeftCon: '续费',
        leftRouterName: 'buyPlan',
        buttonRightCon: '取消',
        rightRouterName: ''
      },
      noBuyData: { // 购买弹框内容
        h5Content: '尊敬的用户，您好！',
        pContent: ' 您还未购买明日情报专业版，无法使用全部功能！',
        buttonLeftCon: '立即购买',
        leftRouterName: 'buyPlan',
        buttonRightCon: '取消',
        rightRouterName: ''
      }
    }
  },
  mounted: function () {
    // 获取浏览器视口高度
    this.clientHeight = document.documentElement.clientHeight - 88 + 'px'
  },
  methods: {
    // input框失去焦点事件
    inputBlur: function (event) {
      this.judgeInput(event.target, false, true, false)
    },
    // input框获取焦点事件
    inputFocus: function (event) {
      this.judgeInput(event.target, true, false, false)
    },
    // 判断是哪一个input框,执行代码
    judgeInput: function (target, icon, error, errors) {
      switch (target.id) {
        case 'username':
          this.usernameIcon = icon
          if (this.usernameVal === '') {
            this.usernameError = error
          }
          break
        case 'password':
          this.passwordIcon = icon
          if (this.passwordVal === '') {
            this.passwordError = error
          }
          break
        case 'validate':
          this.validateIcon = icon
          if (this.validateVal === '') {
            this.validateError = error
          }
          break
      }
    },
    // 点击登录触发
    loginBut: function () {
      if (!this.usernameError && !this.passwordError && !this.validateError) {
        var validateTrue = false
        this.$http.post('http://192.168.31.217:8080/kaptchatest', {
          'yzm': this.validateVal
        }).then(function (response) {
          if (response.data.status === 200) {
            validateTrue = true
          } else {
            validateTrue = false
            alert('xxx')
          }
        })
        if (validateTrue) {
          this.$http.post('http://192.168.31.217:8080/member/login', {
            'username': this.usernameVal,
            'passwordVal': this.passwordVal
          })
          .then(function (response) {
            console.log(response);
            alert('登录成功')
          })
        }
      }
    },
    // 记住密码点击切换是否记住
    rememberCheck: function () {
      if (this.rememberC) {
        this.rememberC = false
      } else {
        this.rememberC = true
      }
    },
    // 弹框点击取消，popShow的值为0
    changePopShow: function () {
      this.popShow = 0
    },
    changeVerifyCode: function () {
      var img = document.querySelector("#img");
      img.src = "http://192.168.31.217:8080/yzm?"+Math.floor(Math.random()*100);
    }

  },
  components: {
    'HeaderL': Header,
    'PopUpBuy': PopUpBuy
  }
}
</script>

<style>
@import url('../../../static/login/login.css');
</style>
